<script setup>
const columns=[
    {title:'序号'},
    {title:'车主名称',dataIndex:'personName',key:'personName'},
    {title:'联系方式',dataIndex:'phoneNumber',key:'phoneNumber'},
    {title:'车牌号码',dataIndex:'carNumber',key:'carNumber'},
    {title:'车牌品牌',dataIndex:'carBrand',key:'carBrand'},
    {title:'剩余有效天数',dataIndex:'totalEffectiveDate',key:'totalEffectiveDate'},
    {title:'状态',dataIndex:'cardStatus',key:'cardStatus'},
    {title:'操作'},
]
import {getCarList} from "@/api/car"
import { ref, onMounted } from "vue";
const carDate=ref([])
onMounted(()=>{
    getCarListAPI()
})
const getCarListAPI=async()=>{
    const res=await getCarList()
    carDate.value=res.data.rows
    console.log(res);
  
}
</script>

<template>
   <div class="box">
      <a-form class="formBox">
        <a-row span="8" class="rowForm">
            <a-col style="margin-left: 25px;">
                <a-form-item label="角色名称" style="width: 300px;">
                    <a-input placeholder="请输入车牌号码"></a-input>
                </a-form-item>
            </a-col>
            <a-col style="margin-left: 55px">
                <a-form-item label="车主姓名" style="width: 300px;">
                    <a-input placeholder="请输入车主姓名"></a-input>
                </a-form-item>
            </a-col>
            <a-col style="margin-left: 55px">
                <a-form-item label="状态" style="width: 300px;">
                   <a-select placeholder="请选择" ></a-select>
                </a-form-item>
            </a-col>
            <a-col>
                <a-form-item style="margin-left: 30px">
                  <a-button type="primary">查询</a-button>
                </a-form-item>
            </a-col>    
        </a-row>
        <a-divider /> 
      </a-form>
        <a-row type="flex">
            <a-col :span="12" style="padding-left: 22px;">
               <a-space>
                <a-button type="primary">添加月卡</a-button>
                <a-button type="primary">批量删除</a-button>
               </a-space>
            </a-col>
            <a-col :span="12">
                <a-span class="textSpan">本园区共计1530个车位,月卡用户5人,车位占有率0.33%</a-span>
            </a-col>
         </a-row>
        <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :dataSource="carDate"
      style="margin-top: 15px;"
    >
    
    </a-table>
   </div>
</template>
<style scoped lang="css">
.box{
    background-color: #ffffff;
    width: 1450px;
    height: 717px;
    margin: 20px 20px 0 20px;
}
.textSpan{
    width: 428px;
    height: 40px;
    font-size: 14px;
    color: #000000d9;
    background-color: #e6f7ff;
    display: inline-block;
    border: 1px solid #e6f7ff;
    text-align: center;
}
.formBox{
        margin-bottom: 55px;
        height: 60px;
}
.rowForm{
    padding-top: 10px;
    height: 50px;
}
</style>